<!--
 * @Author: linjituan linjituan@revolution.com
 * @Date: 2024-10-08 19:29:28
 * @LastEditors: Evan.林 7420884+lovereal@user.noreply.gitee.com
 * @LastEditTime: 2024-11-27 23:34:05
 * @FilePath: \hm-twx-admin\src\components\Tarbar\src\basicTarbar.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script lang="ts" setup>
import UserImg from "@/assets/images/user.png";
import { router } from "@/router";
import { store } from "@/store";
import { userStore } from "@/store/modules/walletUser";
import metaidv2Utils from "@/utils/metaidv2Utils";
import {
HomeOutlined,
LogoutOutlined,
SettingOutlined,
UserOutlined
} from "@ant-design/icons-vue";
import { Dropdown, Menu, MenuProps, message } from "ant-design-vue";
import { computed, h, onMounted, ref, watch } from "vue";
import { useRoute } from "vue-router";

const walletUser = userStore(store);
const route = useRoute();
const isLogin = computed(() => walletUser.getIsLogin);
const userInfo = computed(() => walletUser.getUserInfoObj);
const current = ref<string[]>(["Home"]);
const loading = ref(false);
const items = ref<MenuProps["items"]>([
  {
    key: "Home",
    icon: () => h(HomeOutlined),
    label: "Home",
    title: "Home",
  },
  // {
  //   key: "Profile",
  //   icon: () => h(UserOutlined),
  //   label: "Profile",
  //   title: "Profile",
  // },
  {
    key: "Setting",
    icon: () => h(SettingOutlined),
    label: "My Setting",
    title: "Setting",
  },
]);
// 监听walletUser中isLogin值变化
watch(
  () => walletUser.isLogin,
  (newVal) => {
    console.log("isLogin变化了", newVal);
    sessionStorage.setItem(
      "lastLoginWallet",
      window.$walletUtils.getCurrentWallet()
    );
    // 初始化钱包
    window.$walletUtils.init();
  }
);

// 监听路由变化
watch(
  () => route.name,
  (newVal) => {
    console.log("route变化了", newVal);
    current.value = [newVal as string];
  }
);

async function loginEvent() {
  await metaidv2Utils.loginMetalet();
  // 刷新当前页面
}

function menuClick(e: any) {
  console.log("menuClick", e);
  // 使用router跳转到路由
  router.push({ name: e.key });
}

function logoutEvent() {
  loading.value = true;
  window.metaidwallet.disconnect().then((res) => {
    loading.value = false;

    if (!res || res?.status != "ok") {
      return;
    }
    message.success("Successfully logged out");

    onLogout();
  });
}

function onLogout() {
  //清理之前的登录信息
  walletUser.changeIsLogin(false);
  walletUser.changeUserInfoObj(null);
  if (window.metaidwallet) {
    window.metaidwallet.removeListener("accountsChanged");
    window.metaidwallet.removeListener("networkChanged");
  }
  router.push({ name: "Home" });
  window.location.reload();
}

function toProfile() {
  router.push({ name: "Profile" });
}

onMounted(() => {
  console.log("route", route);
  current.value = [route.name as string];
  setTimeout(() => {
    metaidv2Utils.checkWalletIsLogin();
  }, 100);
});
</script>

<template>
  <div class="top-navbar-wrap">
    <div class="top-navbar-block">
      <div class="top-navbar">
        <div class="top-navbar-content">
          <div class="top-navbar-left">
            <img class="logo-img" src="@/assets/images/logo.png" alt="" />
            <span class="logo-name"
              ><img class="logo2-img" src="@/assets/images/logo2.png" alt=""
            /></span>
            <Menu
              v-model:selectedKeys="current"
              mode="horizontal"
              @click="menuClick"
              :items="items"
            />
          </div>
          <div class="top-navbar-right">
            <div class="post-item" v-if="isLogin">
              <Dropdown>
                <img
                  class="post-img"
                  :src="
                    userInfo.avatar
                      ? 'https://man.metaid.io' + userInfo.avatar
                      : UserImg
                  "
                  alt=""
                />
                <template #overlay>
                  <Menu>
                    <Menu.Item>
                      <a @click="toProfile" href="javascript:;"
                        >Profile<UserOutlined
                          style="margin-left: 10px"
                        ></UserOutlined
                      ></a>
                    </Menu.Item>
                    <Menu.Item>
                      <a @click="logoutEvent" href="javascript:;"
                        >Log Out<LogoutOutlined style="margin-left: 10px"
                      /></a>
                    </Menu.Item>
                    <Menu.Item> </Menu.Item>
                  </Menu>
                </template>
              </Dropdown>
            </div>
            <div class="post-item" v-if="!isLogin" @click="loginEvent">
              <div class="login-icon">Login</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.top-navbar-wrap {
  .logo-name {
    margin-right: 20px;

    .logo2-img {
      width: auto;
      height: 35px;
    }
  }

  .top-navbar-block {
    height: 72px;
  }

  .top-navbar {
    position: fixed;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px;
    background: #00b1ff;
  }

  .top-navbar-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
  }

  .top-navbar-left {
    display: flex;
    align-items: center;
    padding-left: 4px;

    .logo-img {
      width: 40px;
      height: 40px;
    }
  }

  .top-navbar-right {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 4px;

    .btn-item {
      padding: 10px;
      color: #fff;
      cursor: pointer;
      border: 1px solid #fff;
      border-radius: 40px;
    }
  }

  .post-item {
    margin-left: 10px;

    &.mobile-post-item {
      position: fixed;
      right: 30px;
      bottom: 60px;
      width: 60px;
      height: 60px;
    }

    .post-img {
      width: 48px;
      height: 48px;
      cursor: pointer;
    }

    .login-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 48px;
      height: 48px;
      color: #fff;
      cursor: pointer;
      background: #9f9e9e;
      border-radius: 50%;
    }
  }
}
</style>

<style>
.ant-menu-horizontal.ant-menu-light {
  color: #fff;
  background: #00b1ff;
  border-bottom: none;
}
</style>